@dotNum: 13;
@dotW: 20px;
@dotMrgR: 4px;
@dotMrgT: 2px;
@animatH: 50px;
@duration: 4s;
@interval: 0.25s;
@keyframes bgMove {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 100%;
  }
}
@keyframes dotMove {
  0% {
    transform: translateY(0px - @animatH);
  }
  50% {
    transform: translateY(@animatH);
  }
  100% {
    transform: translateY(0px - @animatH);
  }
}
@keyframes dotScale {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.4);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}
@keyframes dotBgColor {
  0% {
    background-color: #ff39a6;
  }
  25% {
    background-color: #a000ff;
  }
  50% {
    background-color: #d700ff;
  }
  75% {
    background-color: #6039ff;
  }
  100% {
    background-color: #ff39a6;
  }
}
.box {
  display: inline-block;
  position: relative;
  padding-bottom: 60px;
  .background {
    background: linear-gradient(
        -152deg,
        transparent 35%,
        rgba(96, 57, 255, 0.25) 35%,
        rgba(96, 57, 255, 0.25) 42%,
        transparent 42%
      )
      top right;
    background-size: 50% 100%;
    background-repeat: repeat;
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: 0;
    filter: blur(12px);
    animation: bgMove @duration * 0.5 linear infinite;
    animation-delay: -0.5s;
  }
  .inner {
    display: flex;
    align-items: center;
    position: relative;
    margin: @animatH 0;
  }
  .group {
    &.group0 {
      position: relative;
      .row0 {
        each(range(@dotNum), {
          .dot:nth-child(@{value}) {
            animation-name: dotMove;
            animation-delay: @value * @interval - @duration - @duration;
            .dotIn {
              animation-name: dotScale;
              animation-delay: @value * @interval - @duration - (@duration * 0.75);
            }
            .dotColor {
              animation-delay: @value * @interval - @duration - (@duration * 0.75);
            }
          }
        });
      }
      .row1 {
        each(range(@dotNum), {
          .dot:nth-child(@{value}) {
            animation-name: dotMove;
            animation-delay: @value * @interval - @duration - @duration;
            .dotIn {
              animation-name: dotScale;
              animation-delay: @value * @interval - @duration - (@duration * 0.75);
            }
            .dotColor {
              animation-delay: @value * @interval - @duration - (@duration * 0.6);
            }
          }
        });
      }
    }
    &.group1 {
      position: absolute;
      top: 0;
      left: 0;
      .row0 {
        each(range(@dotNum), {
          .dot:nth-child(@{value}) {
            animation-name: dotMove;
            animation-delay: @value * @interval - (@duration * 1.5);
            .dotIn {
              animation-name: dotScale;
              animation-delay: @value * @interval - @duration - (@duration * 0.25);
            }
            .dotColor {
              animation-delay: @value * @interval - @duration - (@duration * 0.25);
            }
          }
        });
      }
      .row1 {
        each(range(@dotNum), {
          .dot:nth-child(@{value}) {
            animation-name: dotMove;
            animation-delay: @value * @interval - (@duration * 1.5);
            .dotIn {
              animation-name: dotScale;
              animation-delay: @value * @interval - @duration - (@duration * 0.25);
            }
            .dotColor {
              animation-delay: @value * @interval - @duration - (@duration * 0.1);
            }
          }
        });
      }
    }
    .row {
      display: flex;
      align-items: center;
      transition: transform 0.3s ease-in-out;
      .dot {
        display: inline-block;
        position: relative;
        margin: @dotMrgT @dotMrgR;
        animation-duration: @duration;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
      }
      .dotIn {
        display: inline-block;
        animation-duration: @duration;
        animation-iteration-count: infinite;
      }
      .dotColor {
        display: inline-block;
        width: @dotW;
        height: @dotW;
        border-radius: 100px;
        background: #000;
        animation-name: dotBgColor;
        animation-duration: @duration;
        animation-iteration-count: infinite;
      }
    }
  }
  &:hover {
    .group0 {
      .row0 {
        transform: translateY(50%);
      }
      .row1 {
        transform: translateY(-50%);
      }
    }
    .group1 {
      .row0 {
        transform: translateY(50%);
      }
      .row1 {
        transform: translateY(-50%);
      }
    }
  }
}
